<template>
  <div class="pages-container">

    <!-- 搜索框 Or 工具框 -->
<!--    <a-form class="pages-tools-box" :form="form" @submit="getSearch">-->
<!--      <a-row>-->
<!--        <a-col :span="24" :style="{ textAlign: 'right' }">-->
<!--          <a-button :style="{ marginLeft: '8px' }" @click="edit()">新增</a-button>-->
<!--        </a-col>-->
<!--      </a-row>-->
<!--    </a-form>-->

    <!-- 表格 -->
    <div class="pages-content">
      <a-table :columns="columns" :data-source="data" :pagination="false" rowKey="id" :loading="tableLoading">
        <a-space slot="topState" slot-scope="row">
          <div>
            <a-switch v-model="row.topState" @change="changeIsSave(row)"></a-switch>
          </div>
          <div v-if="row.topState">排序：
            <a-input-number v-model="row.topSort" @input="changeIsSave(row)"></a-input-number>
          </div>
        </a-space>

        <a-space slot="listState" slot-scope="row">
          <div>
            <a-switch v-model="row.listState" @change="changeIsSave(row)"></a-switch>
          </div>
          <div v-if="row.listState">排序：
            <a-input-number v-model="row.listSort" @input="changeIsSave(row)"></a-input-number>
          </div>
        </a-space>

        <a-space slot="chooseTop" slot-scope="row">
          <div>
            <a-switch v-model="row.chooseTop" @change="changeIsSave(row)"></a-switch>
          </div>
          <div v-if="row.chooseTop">排序：
            <a-input-number v-model="row.chooseSort" @input="changeIsSave(row)"></a-input-number>
          </div>
        </a-space>
        <a-space slot="action" slot-scope="record">
          <!--          <a @click="edit(record.id)">编辑</a>-->
          <a v-if="record.isSave" @click="save(record)">保存</a>
        </a-space>
      </a-table>
    </div>

    <!-- 分页 -->
    <a-pagination class="pagination" show-quick-jumper :default-current="current_page" :total="total"
                  @change="changePages"/>
  </div>
</template>

<script>
const columns = [
  {title: 'ID', dataIndex: 'id'},
  {title: '服务商名称', dataIndex: 'title'},
  {title: '首页推荐', scopedSlots: {customRender: 'topState'}},
  {title: '发现页推荐', scopedSlots: {customRender: 'listState'}},
  {title: '官方严选', scopedSlots: {customRender: 'chooseTop'}},
  {title: '操作', scopedSlots: {customRender: 'action'}},
];

import config from "../../tools/config";

export default {
  name: "Message.vue",
  data() {
    return {
      // 公用配置
      Config: {},
      // 分页数据
      current_page: 1,
      total: 100,
      // table数据
      tableLoading: false,
      columns,
      data: [],
      // 搜索表单
      form: this.$form.createForm(this),
      // other
      UserStateList: [],
    };
  },
  created() {
    this.Config = config
    this.getData()
  },
  methods: {

    /**
     * 进行搜索
     * @param e
     */
    getSearch(e) {
      e.preventDefault();
      this.form.validateFields((error) => {
        if (!error) {
          this.getData(1)
        }
      });
    },

    /**
     * 请求Table数据
     * @param pages
     */
    getData(pages = 1) {
      this.tableLoading = true
      this.Http.get('/admin/supplier/index', {
        page: pages,
        ...this.form.getFieldsValue()
      }).then(res => {
        this.tableLoading = false
        if (res.code === 1) {
          this.data = res.data.data.map(i => {
            i.topState = !!i.topState
            i.listState = !!i.listState
            i.chooseTop = !!i.chooseTop
            i.isSave = false
            return i
          })
          this.current_page = res.data.current_page
          this.total = res.data.total
        } else {
          this.$message.error(res.msg)
        }
      }).catch(() => {
        this.tableLoading = false
      })
    },

    /**
     * 切换分页时
     * @param event
     */
    changePages(event) {
      this.getData(event)
    },

    /**
     * 清空搜索项
     */
    handleReset() {
      this.form.resetFields();
      this.getData()
    },

    changeIsSave(row) {
      row.isSave = true
    },
    save(row) {
      console.log(row)
      row.topState = row.topState ? 1 : 0
      row.listState = row.listState ? 1 : 0
      row.chooseTop = row.chooseTop ? 1 : 0
      this.Http.get("/admin/supplier/top", {
        id: row.id,
        topState: row.topState,
        topSort: row.topSort,
        listState: row.listState,
        listSort: row.listSort,
        chooseTop: row.chooseTop,
        chooseSort: row.chooseSort,
      }).then(res => {
        if (res.code == 1) {
          this.$message.success(res.msg)
        } else {
          this.$message.error(res.msg)
        }
      })
    },
  },
}
</script>

<style scoped>

</style>
